<template>
    <div style="margin-top: 20px;">
        <div class="d-f jc-sb ai-c">
            <div>
                <p style="font-size: 20px;color: #2d8cf0;">
                    ▊ 抄送我的
                </p>
            </div>
        </div>
        <div class="mt-10">
            <Table
                   :columns="duplicateListColumns"
                   :data="duplicateListData"></Table>
            <Page
                    ref="currentPage"
                    :total="totalElements"
                    :page-size="size"
                    @on-change="changePage"
                    @on-page-size-change="changePageSize"
                    show-sizer
                    :page-size-opts="[5, 10, 20, 30, 40]"
                    show-total
                    style="margin-top:30px;text-align:center;"></Page>
            <Spin size="large" fix v-show="showSpin">
                {{spinMsg}}
            </Spin>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'duplicateList',
        data () {
            return {
                showSpin: false,
                spinMsg: '加载中，请稍后...',
                duplicateListColumns: [{
                    title: '序号',
                    key: 'statusName',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        return h('span', {
                            props: {}
                        }, params.row._index + 1);
                    }
                }, {
                    title: '流程名称',
                    key: 'workflowInstance.title',
                    render: (h, params) => {
                        return h('span', {
                            props: {

                            }
                        }, params.row.workflowInstance.title);
                    }
                }, {
                    title: '任务类型',
                    key: 'workflowInstance.processDefine.name',
                    align: 'center',
                    width: 280,
                    render: (h, params) => {
                        return h('span', {
                            props: {

                            }
                        }, params.row.workflowInstance.processDefine.name);
                    }
                }, {
                    title: '发起时间',
                    key: 'workflowInstance.startTime',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {
                        return h('span', {
                            props: {

                            }
                        }, params.row.workflowInstance.startTime);
                    }
                }, {
                    title: '当前处理人',
                    width: 200,
                    key: 'taskHandleName',
                    align: 'center'
                }, {
                    title: '状态',
                    width: 200,
                    key: 'statusName',
                    align: 'center',
                    render: (h, params) => {
                        var spanName = '';
                        if (params.row.statusCode === 'readyStart') {
                            spanName = '待开启';
                        } else if (params.row.statusCode === 'waiting') {
                            spanName = '待审批';
                        } else if (params.row.statusCode === 'processing') {
                            spanName = '审批中';
                        } else if (params.row.statusCode === 'completed') {
                            spanName = '审批完成';
                        }
                        return h('span', {
                            props: {}
                        }, spanName);
                    }
                }],
                duplicateListData: [],
                totalElements: 0,
                page: 0,
                size: 10
            };
        },
        mounted () {
            this.loadDoneListData();
        },
        methods: {
            loadDoneListData () {
                this.showSpin = true;
                let queryParams = {};
                queryParams.page = this.page;
                queryParams.size = this.size;

                depot.get({
                    url: this.URL.WORKFLOW.FIND_DUPLICATE_LIST,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        this.showSpin = false;
                        if (data.code === 0) {
                            if (data.data.content.length) {
                                this.duplicateListData = data.data.content;
                                this.size = data.data.size;
                                this.totalElements = data.data.totalElements;
                            }
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            },
            goToBacklogModule (id) {
                if (!id) {
                    this.$Message.error('无法获取任务类型，请刷新后重试');
                    return;
                }
                this.$router.push({
                    name: 'missionDetails',
                    params: {
                        missionId: id
                    }
                });
            },
            // 翻页
            changePage (val) {
                this.page = val - 1;
                this.loadDoneListData();
            },
            // 修改页面数据量
            changePageSize (val) {
                this.size = val;
                this.loadDoneListData();
            }
        }
    };
</script>

<style scoped>

</style>
